<template>
    <div class="cate">
      <el-row>
        <el-col :span="24">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-button type="success" plain @click="addCategory()">添加分类</el-button>
        </el-col>    
      </el-row>

      <tree-grid
      v-loading="loading"
      :treeStructure="true"
      :columns="columns"
      :data-source="dataSource"
      @deleteCate="deleteCategory"
      @editCate="editCategory"
      >
      </tree-grid>

      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage2"
          :page-sizes="[1, 10, 20, 40]"
          :page-size="10"
          layout="sizes, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>

      <!-- 添加分类 -->
      <el-dialog title="添加分类" :visible.sync="addDialogFormVisible">
        <el-form :model="addForm" label-width="80px" :rules="rules" ref="addCateForm">
          <el-form-item label="分类名称" prop="cat_name">
            <el-input v-model="addForm.cat_name" auto-complete="off"></el-input>
          </el-form-item>         
          <el-form-item label="父类名称" >
              <el-cascader
                v-model="selectedOptions"
                :options="options"
                :props="props"
                @change="handleChange">
              </el-cascader>
          </el-form-item>        
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addCateSubmit('addCateForm')">确 定</el-button>
        </div>
      </el-dialog>

    </div>  
</template>

<script>
import TreeGrid from '@/components/TreeGrid/TreeGrid'
import {getGoodsCateList,addCategories} from '@/api/index.js'
export default {
data () {
    return {
        loading:false,
        currentPage2:1,
        total: 0,
        pagenum: 1,
        pagesize: 10,
        dataSource: [
            
        ],
        columns: [
          {text: '分类名称',dataIndex:'cat_name',width:''},
          {text: '是否有效',dataIndex: 'cat_deleted',width:''}, 
          {text: '排序',dataIndex: 'cat_level',width: ''}
        ],
        selectedOptions:[],
        props:{
          value:'cat_id',
          label:'cat_name'
        },
        options: [{
          "cat_id": 1,
          "cat_name": 'A',
          children: [
            {
              "cat_id": 11,
              "cat_name": 'B',
            }
          ]
        }],
        addDialogFormVisible: false,
        addForm:{
          cat_name:'',
          cat_pid:0,
          cat_level:0
        },
        rules:{
          cat_name:[
            {required:true,message:'请输入分类名称', trigger: 'blur' }
          ]
        }
    }
},
//加载页面是触发
created(){
    this.initList()
},
methods: {
  //初始化数据
  initList(){
      this.loading = true
      getGoodsCateList(3,this.pagenum,this.pagesize).then(res=>{
          if(res.meta.status===200){
                this.dataSource = res.data.result
                //更新总条数
                this.total = res.data.total
                this.loading = false
          }else{
              this.$message({
                  type:'error',
                  message:''
              })
          }     
      })
  },
  addCategory:function(){
    this.addDialogFormVisible=true
    getGoodsCateList(2,1,10000).then(res=>{
      console.log(res)
      if(res.meta.status === 200){
        this.options = res.data.result
      }
    })
  },
  //添加商品分类处理
  addCateSubmit:function(){
    this.$refs.addForm.validate(valide=>{
      if(valide){
        if(this.selectedOptions.length === 0){
          this.addForm.cat_pid = 0
          this.addForm.cat_level = 0
        }else if(this.selectedOptions.length === 1){
          this.addForm.cat_pid = this.selectedOptions[this.selectedOptions.length -1]
          this.addForm.cat_level = 1
        }else{
          this.addForm.cat_pid = this.selectedOptions[this.selectedOptions.length -1]
          this.addForm.cat_level = 2
        }

        addCategories(this.addForm).then(res=>{
          if(res.meta.status ===201){
            this.addDialogFormVisible = false
            this.initList()
            this.$message({
              type:'success',
              message:res.meta.msg
            })
          }
        })
      }
    })
  },
  deleteCategory (cid) {
    console.log(cid)
  },
  editCategory (cid) {
    console.log(cid)
  },
  handleSizeChange (val) {
    this.pagesize = val;
    this.initList()
    // console.log(`每页 ${val} 条`)
  },
   handleCurrentChange (val) {
    //更改当前页
    this.pagenum = val;
    //获取新页码数据
    this.initList()
    // console.log(`当前页: ${val}`)
  },
  handleChange(value) {
    console.log(value);
  }
}, //end_methods
  //声明页面组件
components: {
    TreeGrid
},

}
</script>

<style scoped>
  .cate .margin-20 { 
    margin: 20px 0;
  }
  .cate .search-input {
    width: 300px;
  }
  .cate .page {
    padding: 5px 0;
    background-color: #D3DCE6;
  }
</style>